<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章</title>
    <!-- Element UI CSS -->
    <!--远程CSS-->
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--本地CSS-->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/element.css">
    <style>
        /* 确保卡片之间有足够的间距 */
        .el-row {
            margin-bottom: 20px;
        }

        .article-item {
            margin-bottom: 20px;
        }

        .article-content p {
            margin: 5px 0;
        }

        /* 当内容超出时显示省略号 */
        .article-content p:last-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>

        <el-header>
            <el-menu mode="horizontal" router>
                <el-menu-item index="/">
                    <strong class="text-primary">协同会议平台</strong>
                </el-menu-item>
                <el-menu-item style="float: right;" @click="logout">退出</el-menu-item>
            </el-menu>
        </el-header>


        <el-container style="height: 700px">
            <el-aside width="200px">

            <el-row class="sidebar-header" type="flex" align="middle">
                <div class="demo-image__preview">
                    <a href="user_look.html">
                        <el-avatar style="width: 60px; height: 60px" src="img/avatar-6.jpg"></el-avatar>
                    </a>
                </div>
                <div>
                    <span style="margin-left:10px;font-size: 12px;font-weight: bold">小灰</span><br>
                    <span style="margin-left:10px;font-size: 12px;font-weight: bold">研发部</span>
                </div>
            </el-row>

                <el-menu default-active="2-3" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds="defaultOpeneds">
                    <a href="home.html">
                        <el-menu-item index="1">
                            <i class="el-icon-house"></i>
                            <span slot="title">主页</span>
                        </el-menu-item>
                    </a>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>用户列表</span>
                        </template>
                        <el-menu-item-group>
                            <a href="user.html"><el-menu-item index="2-1">查看用户</el-menu-item></a>
                            <a href="my_user.html"><el-menu-item index="2-2">我关注的用户</el-menu-item></a>
                            <a href="article.html"><el-menu-item index="2-3">发布文章</el-menu-item></a>
                            <a href="article_collect.html"><el-menu-item index="2-4">我的收藏</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-office-building"></i>
                            <span>部门列表</span>
                        </template>
                        <el-menu-item-group>
                            <a href="department.html"><el-menu-item index="3-1">全部部门</el-menu-item></a>
                            <a href="meeting.html"><el-menu-item index="3-2">会议系统</el-menu-item></a>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>

            </el-aside>

            <el-main>
                <h2>发布文章</h2>
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="标题名字">
                        <el-input v-model="searchText" placeholder="按标题名字查找"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addArticle">发布文章</el-button>
                    </el-form-item>
                </el-form>

                <div>
                    <el-row :gutter="20">
                        <!-- 文章条目开始 -->
                        <el-col :span="24">
                            <el-card class="box-card article-item">
                                <div slot="header" class="clearfix">
                                    <el-link type="primary" href="article_detail.html">如何做一名合格的Java工程师？</el-link>
                                    <p><strong>作者：</strong>小灰</p>
                                    <p><strong>时间：</strong>2025-1-1 09:52:12</p>
                                    做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <!-- 文章条目开始 -->
                        <el-col :span="24">
                            <el-card class="box-card article-item">
                                <div slot="header" class="clearfix">
                                    <el-link type="primary" href="article_detail.html">如何做一名合格的Java工程师？</el-link>
                                    <p><strong>作者：</strong>小灰</p>
                                    <p><strong>时间：</strong>2025-1-1 09:52:12</p>
                                    做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <!-- 文章条目开始 -->
                        <el-col :span="24">
                            <el-card class="box-card article-item">
                                <div slot="header" class="clearfix">
                                    <el-link type="primary" href="article_detail.html">如何做一名合格的Java工程师？</el-link>
                                    <p><strong>作者：</strong>小灰</p>
                                    <p><strong>时间：</strong>2025-1-1 09:52:12</p>
                                    做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

                <el-row type="flex" justify="center">
                    <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
                </el-row>

                <el-row type="flex" justify="center">
                    <p>&copy; 2025.Company <a href="#">协同会议平台</a></p>
                </el-row>

            </el-main>
        </el-container>

        <!-- Footer -->
    </el-container>
</div>

<!-- JavaScript files -->
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                defaultOpeneds: ['1', '2', '3'],
                searchText: '',
                articles: [
                    {
                        title: '如何做一名合格的Java工程师？',
                        author: '小灰',
                        time: '2025-1-1 09:52:12',
                        content: '做一名Java工程师需要付出非常大的努力...'
                    }
                    // Add more article objects as needed
                ]
            };
        },
        methods: {
            logout() {
                // Logout logic here
                window.location.href = "index.html";
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            onSubmit() {
                // Search logic here
                window.location.href = "article.html";
            },
            addArticle() {
                // Add article logic here
                window.location.href = "article_add.html";
            }
        }
    });
</script>
</body>
</html>